<template>
    <section>
        <el-dialog
            :title="mode == 'Show'?'空瓶回收查看':'空瓶回收确认'"
            v-model="visible"
            :width="'80%'"
            destroy-on-close
            @closed="$emit('closed')"
        >
            <el-form :disabled="mode == 'Show'" ref="dialogForm" label-width="100px">
                <el-row>
                    <el-col v-if="mode !== 'Show'" :span="3">
                        <el-form-item label="单据类型">空瓶回收</el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="单据状态">
                            {{entityObj.processState== 1?'供应商已确认':''}}
                            {{entityObj.processState== 2?'供应商待确认':''}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="申请编号：">{{entityObj.recoveryCode}}</el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="申请单位：">{{entityObj.storeName}}</el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="申请人：" label-width="140px">{{entityObj.applicant}}</el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="申请时间：">{{entityObj.createTime}}</el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="回收单位：">{{entityObj.purchaseUnityName}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="回收时间：">{{entityObj.recoveryTime}}</el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="回收方式：">{{entityObj.recoveryTypeName}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="期望上门回收时间："
                            label-width="140px"
                        >{{entityObj.expectedDate}}</el-form-item>
                    </el-col>
                    <!-- <el-col :span="5">
						<el-form-item label="邮寄收货单位">{{entityObj.storeName}}</el-form-item>
                    </el-col>-->
                </el-row>
                <el-row>
                    <el-form-item label="空瓶清单"></el-form-item>
                    <el-form-item label label-width="0px">
                        <el-table
                            :data="entityObj.recoveryOrderItems"
                            border
                            style="width: 1360px"
                            show-summary
                        >
                            <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                            <el-table-column label="空瓶编码" min-width="120">
                                <template #default="scope">{{ scope.row.materialCode }}</template>
                            </el-table-column>
                            <el-table-column label="空瓶名称" min-width="230">
                                <template #default="scope">{{ scope.row.materialName }}</template>
                            </el-table-column>
                            <el-table-column label="规格" min-width="100">
                                <template #default="scope">{{ scope.row.materialSpecs }}</template>
                            </el-table-column>
                            <el-table-column label="单位" min-width="60">
                                <template #default="scope">{{ scope.row.unitName }}</template>
                            </el-table-column>
                            <!-- <el-table-column label="单价" min-width="60">
								<template #default="scope">{{ scope.row.recoverPrice }}</template>
                            </el-table-column>-->
                            <!-- <el-table-column label="供应商" min-width="200" prop="materialItemId">
								<template #default="scope">
									<el-select placeholder="---请选择供应商---" v-model="scope.row.recoverySuplyId" style="width: 100%">
										<el-option v-for="item in scope.row.emptiesSupplierList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
									</el-select>
								</template>
                            </el-table-column>-->
                            <!-- <el-table-column label="标识码" min-width="150">
								<template #default="scope">
						           <el-input v-model="scope.row.materialBarCode" style="width: 100%" ></el-input>
						        </template>
                            </el-table-column>-->
                            <el-table-column label="申请数量" min-width="100">
                                <template #default="scope">
                                    <el-input
                                        disabled
                                        v-model="scope.row.recoveryCount"
                                        style="width: 100%"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="门店单价"
                                min-width="100"
                                v-if="this.orgType == 1 || this.orgType == 2"
                            >
                                <template #default="scope">
                                    <el-input
                                        disabled
                                        v-model="scope.row.storePrice"
                                        style="width: 100%"
                                    ></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column
                                label="供应商单价"
                                min-width="100"
                                v-if="this.orgType == 1 || this.orgType == 3"
                            >
                                <template #default="scope">
                                    <el-input
                                        disabled
                                        v-model="scope.row.supplierPrice"
                                        style="width: 100%"
                                    ></el-input>
                                </template>
                            </el-table-column>

                            <!-- <el-table-column label="金额" min-width="100">
								<template #default="scope">
									<el-input disabled v-model="scope.row.recoverPriceTotal"
										style="width: 100%"></el-input>
								</template>
                            </el-table-column>-->
                            <el-table-column label="*收到空瓶数量" min-width="130" prop="remark">
                                <template #default="scope">
                                    <el-input-number
                                        v-model="scope.row.recoveryCount2"
                                        style="width: 100%"
                                        :step="1"
                                        :min="0"
                                        controls-position="right"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="*空瓶有效数量" min-width="130" prop="remark">
                                <template #default="scope">
                                    <el-input-number
                                        v-model="scope.row.recoveryCount3"
                                        style="width: 100%"
                                        :step="1"
                                        @change="onValidCountChange(scope.$index, scope.row)"
                                        :min="0"
                                        controls-position="right"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="*空瓶无效数量" min-width="130" prop="remark">
                                <template #default="scope">
                                    <el-input-number
                                        v-model="scope.row.recoveryCount4"
                                        style="width: 100%"
                                        :step="1"
                                        :min="0"
                                        controls-position="right"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="门店有效金额"
                                min-width="120"
                                v-if="this.orgType == 1 || this.orgType == 2"
                            >
                                <template #default="scope">
                                    <el-input
                                        disabled
                                        v-model="scope.row.storeTotalAmount"
                                        style="width: 100%"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="供应商有效金额"
                                min-width="130"
                                v-if="this.orgType == 1 || this.orgType == 3"
                            >
                                <template #default="scope">
                                    <el-input
                                        disabled
                                        v-model="scope.row.supplierTotalAmount"
                                        style="width: 100%"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="*无效原因" min-width="150" prop="remark">
                                <template #default="scope">
                                    <!-- <el-tooltip
                                        v-if="scope.row.efficiency && scope.row.efficiency.length > 8"
                                        :content="scope.row.efficiency"
                                        placement="top-start"
                                    >
                                        <span>{{ scope.row.efficiency.slice(0,8) }}...</span>
                                    </el-tooltip>
                                    <span v-else>{{ scope.row.efficiency || '' }}</span> -->
                                    <el-input
                                        v-model="scope.row.efficiency"
                                        style="width: 100%"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="供应商" min-width="200" prop="materialItemId">
                                <template #default="scope">
                                    <el-select
                                        disabled
                                        placeholder="---请选择供应商---"
                                        v-model="scope.row.recoverySuplyId"
                                        style="width: 100%"
                                    >
                                        <el-option
                                            v-for="item in scope.row.emptiesSupplierList"
                                            :key="item.supplierId"
                                            :label="item.supplierName"
                                            :value="item.supplierId"
                                        />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="供应商" min-width="150" prop="remark">
								<template #default="scope">
									{{entityObj.recoverySuplyName}}
								</template>
                            </el-table-column>-->
                            <!-- <el-table-column label="物流" min-width="150">
								<template #default="scope">
									<el-select :rules="{required:formData.recoveryType==1?true:false,message:'请选择物流',trigger:'change'}" style="width: 100%;" v-model="scope.row.logisticsId"  class="w-300">
										<el-option v-for="item in logList" :key="item.logisticsId" :label="item.logisticsName"
											:value="item.logisticsId" />
									</el-select>
								</template>
							</el-table-column>
							<el-table-column label="物流单号" min-width="100">
								<template #default="scope">
							       <el-input :rules="{required:formData.recoveryType==1?true:false,message:'请输入物流单号',trigger:'blur'}" v-model="scope.row.logisticsNum" style="width: 100%" ></el-input>
							    </template>
                            </el-table-column>-->
                            <el-table-column label="门店申请备注" min-width="150" prop="remark">
                                <template #default="scope">
                                    <el-tooltip
                                        v-if="scope.row.remark && scope.row.remark.length > 8"
                                        :content="scope.row.remark"
                                        placement="top-start"
                                    >
                                        <span>{{ scope.row.remark.slice(0,8) }}...</span>
                                    </el-tooltip>
                                    <span v-else>{{ scope.row.remark || '' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="供应商接单备注" min-width="150" prop="remark">
                                <template #default="scope">
                                    <el-tooltip
                                        v-if="scope.row.reRemark && scope.row.reRemark.length > 8"
                                        :content="scope.row.reRemark"
                                        placement="top-start"
                                    >
                                        <span>{{ scope.row.reRemark.slice(0,8) }}...</span>
                                    </el-tooltip>
                                    <span v-else>{{ scope.row.reRemark || '' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="无效照片" min-width="150">
                                <template #default="scope">
                                    <sc-upload-multiple
                                        :disabled="mode=='Show'"
                                        v-model="scope.row.efficiencyImages"
                                        :objName="'Supply/RevoceryOrder'"
                                        :uploadType="'OSS'"
                                        :bucketName="'jtmc'"
                                        :limit="5"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column label="空瓶照片" min-width="150">
                                <template #default="scope">
                                    <sc-upload-multiple
                                        :disabled="mode=='Show'"
                                        v-model="scope.row.recoveryImages"
                                        :objName="'Supply/RevoceryOrder'"
                                        :uploadType="'OSS'"
                                        :bucketName="'jtmc'"
                                        :limit="5"
                                    />
                                </template>
                            </el-table-column>
                            <!-- 		<el-table-column label="操作" min-width="100">
								<template #default="scope">
									<el-button size="small" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
								</template>
                            </el-table-column>-->
                        </el-table>
                    </el-form-item>
                </el-row>
            </el-form>
            <template #footer>
                <div style="text-align: center;">
                    <el-button @click="visible = false">关 闭</el-button>
                    <el-button v-if="mode != 'Show'" type="primary" @click="submitSave()">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </section>
</template>

<script>
import tool from "@/utils/tool";
export default {
    data() {
        return {
            mode: "",
            visible: false,
            entityObj: {},
            modalSup: {},
            visibleSup: false,
            backRecoveryCount1: 0,
            backrecoveryCount2: 0,
            orgType: "",
        };
    },
    methods: {
        open(data) {
            this.mode = "Add";
            this.visible = true;
            this.entityObj = data;
            console.log(data);
        },
        show(data) {
            this.mode = "Show";
            this.visible = true;
            this.entityObj = data;
            console.log(data);
        },
        async submitSave() {
            console.log(this.entityObj);
            try {
                const returnValue = await this.$API.auth.PostProcessApi.post(
                    "recovery-order/confirmRecoveryOrder",
                    this.entityObj
                );
                if (returnValue.status == 200) {
                    this.$message.success(returnValue.msg);
                    this.$emit("success");
                    this.visible = false;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                this.$message.error(error.message);
                return false;
            }
        },
        async onValidCountChange(index, row) {
            row.storeTotalAmount = row.storePrice * row.recoveryCount3;
            row.supplierTotalAmount = row.supplierPrice * row.recoveryCount3;
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
    },
};
</script>

<style scoped>
/deep/ .el-upload--picture-card {
    width: 50px;
    height: 50px;
}
/deep/ .el-upload {
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-table .info-row > td {
    background: #e4e7ed;
    user-select: none; /* 禁用文本选择 */
    pointer-events: none; /* 禁用鼠标事件 */
}
</style>
